<template>
  <div>
    <!-- 经费列表 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="70%"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div slot="title" class="title">
        <div><span>经费列表</span></div>
        <div><i class="el-icon-close" @click="dialogVisible = false"></i></div>
      </div>
      <div class="content">
        <div>
          <el-button
            class="generalButton"
            icon="el-icon-plus"
            style="margin-bottom: 0.7143rem"
            @click="addExpenditure"
            >新增</el-button
          >
        </div>
        <div class="table">
          <el-alert style="background: #e6f7ff" :closable="false">
            <span style="color: #64736c">已选择</span>
            <span style="color: #519df8">{{ selectData.length }}</span>
            <span style="padding-right: 1.3571rem; color: #64736c">项</span>
            <span style="color: #519df8; cursor: pointer" @click="clear()"
              >清空</span
            >
          </el-alert>
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="tableData"
            border
            :cell-style="cellStyle"
            highlight-current-row
            :header-cell-style="{
              background: '#2B69A6',
              color: '#fff',
              borderColor: '#BDE1FC',
            }"
            tooltip-effect="dark"
            style="width: 100%; margin-top: 0.8571rem"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"> </el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="id" label="经费ID" align="center">
            </el-table-column>
            <el-table-column prop="bkjd" label="拨款节点" align="center">
            </el-table-column>
            <el-table-column prop="bksj" label="拨付时间" align="center">
            </el-table-column>
            <el-table-column prop="bkje" label="拨付金额" align="center">
            </el-table-column>
            <el-table-column  label="是否拨付" align="center">
              <template slot-scope="scope">
                {{ifmoney(scope.row.sfbk)}}
              </template>
            </el-table-column>
            <el-table-column prop="htmc" label="所属合同" align="center">
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" style="padding-right: 0.5rem" @click="editExpenditure(scope.row)"
                  >编辑</el-button
                >
                <span
                  style="border-right: 1px solid #ffffff; width: 0.0714rem"
                ></span>
                <el-button type="text" style="padding-left: 0.5rem" @click="deletejingfei(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.totalCount"
          >
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="contentButton">
          <el-button @click="close()">关闭</el-button>
          <!-- <el-button @click="close()" class="generalButton">确定</el-button> -->
        </div>
      </span>
    </el-dialog>
    <!-- 新增/编辑 经费 -->
    <el-dialog
      :visible.sync="addExpenditureDialogVisible"
      width="50%"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div slot="title" class="title">
        <div><span>{{title}}</span></div>
        <div>
          <i
            class="el-icon-close"
            @click="addExpenditureDialogVisible = false"
          ></i>
        </div>
      </div>
      <div class="content">
        <el-form
          ref="addexpenditure"
          :model="addexpenditure"
          label-width="150px"
          class="demo-ruleForm"
          :rules="rules"
        >
          <el-form-item label="拨付节点：" prop="bkjd">
            <el-input
              v-model="addexpenditure.bkjd"
              placeholder="请输入拨付节点"
              :rows="3"
            ></el-input>
          </el-form-item>
          <el-form-item label="拨付时间：" prop="bksj">
            <el-date-picker
              v-model="addexpenditure.bksj"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="拨付金额(万元)：" prop="bkje">
            <el-input
              v-model="addexpenditure.bkje"
              placeholder="请输入拨付金额"
              :rows="3"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否拨付：" prop="sfbk">
            <el-select
              v-model="addexpenditure.sfbk"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="是" value="0"> </el-option>
              <el-option label="否" value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属合同：" prop="htmc">
            <el-input
              v-model="addexpenditure.htmc"
              :rows="3"
              disabled
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="contentButton">
          <el-button @click="calladdExpenditureDialog"
            >取消</el-button
          >
          <el-button class="generalButton" @click="addExpend">确定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getExpenditure, addExpenditure, editExpenditure } from "@/api/gcxinxigl.js"
export default {
  props: ["isDialog", "closeDialog"],
  data() {
    return {
      title: '',
      loading: false,
      // 选中的数组
      selectData: [],
      //经费列表对话框是否关闭
      dialogVisible: false,
      // 经费新增对话框
      addExpenditureDialogVisible: false,
      addexpenditure: {
        cjr: 'admin',
        gxr: 'admin',
        xlzt: '1',
        htglbidL: ''
      },
      // 分页
      pageInfo: {
        currentPage: 1,
        totalCount: 0,
        pageSize: 0,
      },
      // 表格
      tableData: [
        
      ],
      flag: '0',
      jingfeicontract: '',
      rules: {
        bkjd: [
          { required: true, message: '请输入拨付节点', trigger: 'blur' },
          { max: 50, message: '拨付节点录入不可超过50字', trigger: 'blur' }
        ],
        bksj: [
          { required: true, message: '请输入拨付时间', trigger: 'blur' }
        ],
        bkje: [
          { required: true, message: '请输入拨付金额', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '仅可录入正整数', trigger: 'blur'}
        ],
      }
    }
  },
  watch: {
    // isDialog() {
    //   this.dialogVisible = this.isDialog;
    // },
  },
  mounted() {
    // this.init()
  },
  methods: {
    // 获取经费列表
    init(value) {
      this.dialogVisible = true
      this.loading = true
      console.log(value, '00000');
      this.addexpenditure.htglbid = value.id
      this.addexpenditure.htmc = value.htmc
      this.jingfeicontract = value.htmc
      getExpenditure({id: value.id}).then(res => {
        // console.log(res, '获取经费列表');
        this.tableData = res.data
        this.pageInfo = res.pageInfo
        this.loading = false
      }).catch(err => {
        console.log(err)
      })
    },
    // 是否拨款
    ifmoney(status) {
      const statusObj = {
        0: "未拨款",
        1: "已拨款"
      };
      return statusObj[status];
    },
    // 新增经费对话框
    addExpenditure() {
      this.addExpenditureDialogVisible = true
      this.title = '新增经费'
      this.flag = '0'
      this.addexpenditure.htmc = this.jingfeicontract
    },
    // 编辑经费对话框
    editExpenditure(data) {
      console.log(data, '{{{{{');
      this.addExpenditureDialogVisible = true
      this.title = '编辑经费'
      this.flag = '1'
      this.addexpenditure = data
    },
    // 新增/编辑 经费
    addExpend() { 
      this.$refs['addexpenditure'].validate((value) => {
        if (value) {
          if (this.flag === '0') {
            addExpenditure(this.addexpenditure).then(res => {
              console.log(res)
              this.$message.success('新增成功！')
              this.addExpenditureDialogVisible = false
              this.$refs.addexpenditure.resetFields()
              getExpenditure({id: this.addexpenditure.htglbid}).then(res => {
                this.tableData = res.data
                this.pageInfo = res.pageInfo
              }).catch(err => {
                console.log(err)
              })
              // this.init()
            }).catch(err => {
              console.log(err)
            })
          } else if (this.flag === '1') {
            editExpenditure(this.addexpenditure.id, this.addexpenditure).then(res => {
              console.log(res, '经费编辑成功');
              this.$message.success('编辑成功！')
              this.addExpenditureDialogVisible = false
              this.init()
            }).catch(err => {
              console.log(err)
            })
          }
        }
      })
    },
    // 取消新增/编辑
    calladdExpenditureDialog() {
      this.addExpenditureDialogVisible = false
      this.addexpenditure = {
        cjr: 'admin',
        gxr: 'admin',
        xlzt: '1',
        htglbidL: ''
      }
    },
    // 删除经费
    deletejingfei(data) {
      editExpenditure(data.id, {xlzt: '0'}).then(res => {
        // console.log(res)
        this.$message.success('删除成功！')
        getExpenditure({id: this.addexpenditure.htglbid}).then(res => {
          this.tableData = res.data
        }).catch(err => {
          console.log(err)
        })
        // this.init()
      }).catch(err => {
        console.log(err)
      })
    },
    // 清除选中项
    clear() {
      (this.selectData = []), this.$refs.multipleTable.clearSelection();
    },
    // 关闭经费列表框
    close() {
      this.dialogVisible = false;
      this.$emit("closejingfeiDialog");
    },
    handleSelectionChange(val) {
      this.selectData = val;
    },
    // 更改边框颜色
    cellStyle() {
      return "border-color:#BDE1FC;";
    },
    // 页数总数改变
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      // 获取经费列表接口
      getExpenditure({id: this.addexpenditure.htglbid}).then(res => {
          this.tableData = res.data
          this.pageInfo = res.pageInfo
        }).catch(err => {
          console.log(err)
        })
    },
    // 当前页数改变
    handleCurrentChange(val) {
      this.pageInfo.currentPage = val
      // 获取经费列表接口
      getExpenditure({id: this.addexpenditure.htglbid}).then(res => {
          this.tableData = res.data
          this.pageInfo = res.pageInfo
        }).catch(err => {
          console.log(err)
        })
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  color: #000;
  background: #fff;
  font-size: 1.1429rem;
  height: 3.5714rem;
  display: flex;
  align-items: center;
  padding: 0 1.4286rem;
  border-bottom: 1px solid #dcdcdc;
  justify-content: space-between;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #bde1fc;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #bde1fc;
}
.pagination {
  padding-top: 0.7143rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.contentLeft {
  display: flex;
  flex-direction: column;
  text-align: left;
  span {
    padding-bottom: 1.7857rem;
  }
}
.contentButton {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contentRight {
  display: flex;
  flex-direction: column;
  text-align: left;
  span {
    padding-bottom: 1.7857rem;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;
  background: #fff;
  border-top: 1px solid #dcdcdc;
}
</style>